<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.jpg" alt="logo">
    </div>
    <!-- 手机号 -->
    <InputGroup type="text" v-model="phone"  placeholder="手机号" :btnTitle="btnTitle" :disabled="disabled" :error="errors.phone" @btnClick="getVerifyCode"></InputGroup>
    <!-- 验证码 -->
    <InputGroup type="number" v-model="verifyCode" placeholder="验证码" :error="errors.code"></InputGroup>
    
    <!-- 用户服务协议 -->
    <div class="login_des">
      <p>
        新用户登录即自动注册，表示已同意
        <span>《用户服务协议》</span>
      </p>
    </div>
    <!-- 登录按钮 -->
    <div class="login_btn">
      <button :disabled="isClick" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script>
import InputGroup from '../components/InputGroup2.vue'

export default {
  name: 'login',
  data () {
    return {
      phone: '',
      verifyCode: '',
      errors: {},
      disabled: false,
      btnTitle: '获取验证码'
    }
  },
  components: {
    InputGroup
  },
  computed: {
    isClick () {
      if (!this.phone || !this.verifyCode) {
        return true // 登录按钮禁用
      } else {
        return false // 登录按钮可点击
      }
    }
  },
  methods: {
    //  获取短信验证码
    getVerifyCode () {
      if (this.validatePhone()) {
        this.validateBtn()
        // 发送网络请求
        this.$axios.post('/api/posts/sms_send', {
          tpl_id: "140481",
          key: "795be723dd9e88c3ea98e2b6713ab795",
          phone: this.phone
        }).then(res => {
          console.log(res)
        })
      }
    },
    // 判断手机号是否正确
    validatePhone () {
      // 验证手机号码
      if (!this.phone) {
        this.errors = {
          phone: '手机号码不能为空'
        }
        return false
      } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
        this.errors = {
          phone: '请填写正确的手机号码'
        }
        return false
      } else {
        this.errors = {}
        return true
      }
    },
    // 点击发送
    validateBtn () {
      let time = 60
      let timer = setInterval(() => {
        if (time === 0) {
          // 未计时，清除定时器
          clearInterval(timer)
          this.btnTitle = '获取验证码'
          this.disabled = false
        } else {
          // 倒计时
          this.btnTitle = time + '秒后重试'
          this.disabled = true
          time--
        }
      }, 1000);
    },
    // 点击登录
    handleLogin () {
      this.errors = {}
      this.$axios.post('/api/posts/sms_back', {
        phone: this.phone,
        code: this.verifyCode
      }).then(res => {
        console.log(res.data)
        // 登录成功，设置本地存储 ele_login，登录状态并且跳转到/
        localStorage.setItem('ele_login', res.data.user_id)
        this.$rourer.push('/')
      }).catch(err => {
        // 返回错误信息
        this.errors = {
          code: err.response
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}

.logo {
  text-align: center;
}
.logo img {
  width: 150px;
}
.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
}
.login_des {
  color: #aaa;
  line-height: 22px;
}
.login_des span {
  color: #4d90fe;
}
.login_btn button {
  width: 100%;
  height: 40px;
  background-color: #48ca38;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
}
.login_btn button[disabled] {
  background-color: #8bda81;
}
</style>
